WPF (Windows Presentation Foundation) এ Animation বা অ্যানিমেশন একটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য, যা UI উপাদানগুলির মধ্যে বিভিন্ন পরিবর্তন (যেমন আকার, স্থান, রঙ) করতে পারে। WPF এ দুটি প্রধান ধরনের অ্যানিমেশন ব্যবহৃত হয়: KeyFrame Animation এবং Complex Animation Sequence।
নিচে এই দুটি অ্যানিমেশনের ব্যবহার এবং তাদের স্ট্রাকচার ব্যাখ্যা করা হয়েছে।
১. KeyFrame Animation (কীফ্রেম অ্যানিমেশন)
KeyFrame Animation হল একটি টাইমলাইন ভিত্তিক অ্যানিমেশন, যেখানে অ্যানিমেশনের নির্দিষ্ট পয়েন্টে (কীফ্রেমে) মান পরিবর্তিত হয়। এটি একটি নির্দিষ্ট সময়ের মধ্যে বিভিন্ন পরিমাণ পরিবর্তন করার জন্য ব্যবহৃত হয়।
KeyFrame Animation এর বৈশিষ্ট্য (Properties of KeyFrame Animation)
- KeyFrames: অ্যানিমেশনের নির্দিষ্ট সময়ে (যেমন 0%, 50%, 100%) মানের পরিবর্তন করার জন্য কীফ্রেম ব্যবহৃত হয়।
- Animation Types: সাধারণত DoubleAnimation, ColorAnimation, PointAnimation ইত্যাদি ব্যবহার করা হয়।
- Ease Functions: অ্যানিমেশনকে আরও মসৃণ করার জন্য Ease-in, Ease-out বা Ease-in-out ফাংশন ব্যবহার করা যেতে পারে।
KeyFrame Animation উদাহরণ (Example of KeyFrame Animation):
নিচে একটি বেসিক KeyFrame Animation এর উদাহরণ দেওয়া হলো, যেখানে একটি বাটন ব্যবহার করে তার অবস্থান পরিবর্তন করা হয়েছে।
<Window x:Class="WPFApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="KeyFrame Animation Example" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="ButtonAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="myButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<KeyFrame KeyTime="0:0:0" Value="0" />
<KeyFrame KeyTime="0:0:1" Value="200" />
<KeyFrame KeyTime="0:0:2" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Button x:Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">
<Button.RenderTransform>
<TranslateTransform x:Name="buttonTransform"/>
</Button.RenderTransform>
</Button>
</Grid>
</Window>
C# কোড (Code-behind):
private void Button_Click(object sender, RoutedEventArgs e)
{
Storyboard storyboard = (Storyboard)this.Resources["ButtonAnimation"];
storyboard.Begin();
}
এখানে, বাটনটি ক্লিক করলে তার অবস্থান একাধিক কীফ্রেম ব্যবহার করে পরিবর্তিত হবে। প্রথমে বাটনটি তার প্রাথমিক অবস্থানে থাকবে (0), তারপর এক সেকেন্ডে 200 পিক্সেল ডান দিকে চলে যাবে, এবং পরবর্তীতে আবার তার প্রাথমিক অবস্থানে ফিরে আসবে।
২. Complex Animation Sequence (কমপ্লেক্স অ্যানিমেশন সিকোয়েন্স)
Complex Animation Sequence হল একাধিক অ্যানিমেশন একসাথে বা পর্যায়ক্রমে চলা। এতে একাধিক অ্যানিমেশন একাধিক UI উপাদানকে একযোগভাবে বা আলাদা আলাদা সময়পর্বে অ্যানিমেটেড করে। আপনি একটি স্টোরিবোর্ড (Storyboard) ব্যবহার করে একাধিক অ্যানিমেশনকে সংগঠিত এবং নিয়ন্ত্রণ করতে পারেন।
Complex Animation Sequence এর বৈশিষ্ট্য (Properties of Complex Animation Sequence)
- Multiple Animations: একাধিক অ্যানিমেশন একটি স্টোরিবোর্ডের মধ্যে একসাথে বা পর্যায়ক্রমে চালানো যেতে পারে।
- KeyFrames এবং Timelines: স্টোরিবোর্ডের মধ্যে টাইমলাইন এবং কীফ্রেম ব্যবহারের মাধ্যমে একাধিক পরিবর্তন সমন্বিত করা যায়।
- BeginTime এবং Duration: একটি অ্যানিমেশনের শুরু এবং সম্পূর্ণ সময় নিয়ন্ত্রণ করা যায়।
Complex Animation Sequence উদাহরণ (Example of Complex Animation Sequence):
নিচে একটি Complex Animation Sequence উদাহরণ দেওয়া হলো যেখানে একাধিক কন্ট্রোলের জন্য একাধিক অ্যানিমেশন সম্পাদিত হয়।
<Window x:Class="WPFApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Complex Animation Sequence Example" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="ComplexAnimationSequence">
<!-- Rotate Animation -->
<DoubleAnimation Storyboard.TargetName="myButton"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:2" RepeatBehavior="Forever"/>
<!-- Move Animation -->
<DoubleAnimation Storyboard.TargetName="myButton"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
From="0" To="200" Duration="0:0:2"/>
<!-- Change Color Animation -->
<ColorAnimation Storyboard.TargetName="myButton"
Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
From="Red" To="Green" Duration="0:0:2"/>
</Storyboard>
</Window.Resources>
<Grid>
<Button x:Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">
<Button.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="buttonMoveTransform"/>
<RotateTransform x:Name="buttonRotateTransform"/>
</TransformGroup>
</Button.RenderTransform>
<Button.Background>
<SolidColorBrush Color="Red"/>
</Button.Background>
</Button>
</Grid>
</Window>
C# কোড (Code-behind):
private void Button_Click(object sender, RoutedEventArgs e)
{
Storyboard storyboard = (Storyboard)this.Resources["ComplexAnimationSequence"];
storyboard.Begin();
}
এখানে, myButton বাটনের জন্য তিনটি আলাদা অ্যানিমেশন তৈরি করা হয়েছে:
- Rotate: বাটনটি 360 ডিগ্রি ঘুরবে।
- Move: বাটনটি horizontal অক্ষরে 200 পিক্সেল চলে যাবে।
- Change Color: বাটনের ব্যাকগ্রাউন্ড কালার রেড থেকে গ্রিনে পরিবর্তিত হবে।
এই তিনটি অ্যানিমেশন একসাথে চলবে এবং বাটনের অবস্থান, রঙ, এবং ঘূর্ণন পরিবর্তিত হবে।
সারাংশ (Summary)
- KeyFrame Animation হল একটি টাইমলাইন-ভিত্তিক অ্যানিমেশন, যেখানে নির্দিষ্ট সময়ে কন্ট্রোলের বিভিন্ন প্রপার্টি পরিবর্তিত হয়। এটি UI উপাদানগুলির মধ্যে নির্দিষ্ট কাস্টম পরিবর্তন আনার জন্য ব্যবহৃত হয়।
- Complex Animation Sequence হল একাধিক অ্যানিমেশন একসাথে বা পর্যায়ক্রমে চলার পদ্ধতি, যা একাধিক UI উপাদান এবং প্রপার্টির জন্য প্রয়োগ করা যেতে পারে। এটি জটিল অ্যানিমেশন কনফিগারেশনের জন্য ব্যবহৃত হয়, যেখানে একাধিক পরিবর্তন একযোগে ঘটানো হয়।
WPF এ এই দুই ধরনের অ্যানিমেশন ব্যবহার করে আপনি সৃজনশীল এবং আকর্ষণীয় UI তৈরি করতে পারবেন।
Read more
